document.querySelector(".toggle").addEventListener("click", function (event) {
  this.classList.add("animate");

  setTimeout(() => {
    this.classList.toggle("active");
    toggleTheme(event);
  }, 150);

  setTimeout(() => this.classList.remove("animate"), 300);
});
/**
 * 切换主题色，扩散渐变动画
 *
 * @param {MouseEvent} event 点击事件
 */
function toggleTheme(event) {
  const willDark = !isDark();
  // 浏览器新特性不支持 或者 开启了动画减弱
  if (!document.startViewTransition || isReducedMotion()) {
    toggleDark();
    return;
  }

  const transition = document.startViewTransition(() => {
    toggleDark();
  });

  // 传入点击事件，从点击处开始扩散。否则，从右上角开始扩散
  const x = event?.clientX ?? window.innerWidth;
  const y = event?.clientY ?? 0;

  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );
  void transition.ready.then(() => {
    const clipPath = [
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`
    ];
    document.documentElement.animate(
      {
        clipPath: willDark ? clipPath : [...clipPath].reverse()
      },
      {
        duration: 500,
        easing: "ease-in",
        pseudoElement: willDark
          ? "::view-transition-new(root)"
          : "::view-transition-old(root)"
      }
    );
  });
}

function toggleDark() {
  document.documentElement.classList.toggle("dark");
}

/**
 * 检测用户的系统是否被开启了动画减弱功能
 * @link https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion
 */
function isReducedMotion() {
  return window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
}

/**
 * 当前主题色是否是暗色
 */
function isDark() {
  return document.documentElement.classList.contains("dark");
}
